<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>专家评估</title>
    <link rel="stylesheet" href="/css/element.css">
</head>
<body>
<script src="/js/Vue.js"></script>
<script src="/js/element.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/Qs.js"></script>
<script type="text/javascript" src="/js/layer.js"></script>
<style>
    html,body {
        height: 100%;
        padding: 0;
        margin: 0;
    }
    #test {
        height:100%;
    }
    .el-container {
        height:100%;
    }
    .el-aside {
        color: #333;
        text-align: center;
        line-height: 200px;
        height:100%;
        padding:5px 5px 5px 0;
    }

    .el-main {
        color: #333;
        text-align: center;
        height:100%;
        padding:5px;
        box-sizing: border-box;
    }
    .el-main .el-card__body {
        height:100%;
        padding:1%;
    }
    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
    /*title样式*/
    .title_box {
        overflow: hidden;
        display: block;
    }

    .title_name {
        float: left;
        display: block;
        height:25px;
        line-height:25px;
    }

    .title_name span {
        display: inline-block;
        width: 3px;
        height: 21px;
        background-color: #44bfca;
        vertical-align: sub;
    }

    .title_name h3 {
        display: inline-block;
        font-weight: bolder;
        margin:0;
        height:25px;
        line-height:25px;
    }
    /*场景模板样式*/
    .list-group-item {
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #00CED1;
        margin: 8px auto;
        width: 90%;
        font-weight: normal;
        font-size:14px;
        overflow: hidden;
    }
    .list-group-item:hover {
        cursor: default;
        background-color: #00BFFF;
    }
    /*当前场景样式*/
    .active {
        background-color:#00BFFF!important;
    }
    /deep/.el-divider {
        margin:25px 0 0 0;
    }
    .el-row {
        margin-top:15px;
    }
    .layui-layout-admin .layui-body .layadmin-tabsbody-item {
        padding:0;
    }
    /*对话框样式*/
    /* wechat **css*/
    body{
        background-color: #ebebeb;
        font-family: -apple-system;
        font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;
    }
    .chat-sender{
        clear:both;
        font-size: 80%;
    }
    .chat-sender div:nth-of-type(1){
        float: left;
    }
    .chat-sender div:nth-of-type(2){
        margin: 0 50px 2px 50px;
        padding: 0px;
        color: #848484;
        font-size: 70%;
        text-align: left;
    }
    .chat-sender div:nth-of-type(3){
        float: left;
        background-color: #EEEEEE;
        margin: 0 50px 10px 10px;
        padding: 10px;
        border-radius:7px;
        text-indent: -12px;
        max-width: 90%;
    }

    .chat-receiver{
        clear:both;
        font-size: 80%;
    }
    .chat-receiver div:nth-of-type(1){
        float: left;
    }
    .chat-receiver div:nth-of-type(2){
        margin: 0px 50px 2px 50px;
        padding: 0px;
        color: #848484;
        font-size: 70%;
        text-align: left;
    }
    .chat-receiver div:nth-of-type(3){
        float:left;
        background-color: #b2e281;
        margin: 0 50px 10px 10px;
        padding: 10px;
        border-radius:7px;
        max-width:90%;
    }

    .chat-receiver div:first-child img,
    .chat-sender div:first-child img{
        width: 40px;
        height: 40px;
        /*border-radius: 10%;*/
    }

    .chat-left_triangle{
        height: 0px;
        width: 0px;
        border-width: 6px;
        border-style: solid;
        border-color: transparent #EEEEEE transparent transparent;
        position: relative;
        left: -22px;
        top: 3px;
    }
    .chat-right_triangle{
        height: 0px;
        width: 0px;
        border-width: 6px;
        border-style: solid;
        border-color: transparent #b2e281 transparent transparent;
        position: relative;
        left:-22px;
        top:3px;
    }

    .chat-notice{
        clear: both;
        font-size: 70%;
        color: white;
        text-align: center;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .chat-notice span{
        background-color: #cecece;
        line-height: 25px;
        border-radius: 5px;
        padding: 5px 10px;
    }
    .content_box{
        text-align:left;
        font-size:16px;
    }
    #session {
        padding:15px 15px 50px 15px;
    }
    /*角色分组样式*/
    #roleGroup {
        border-radius: 4px;
        margin-top:1%;
        height:29%;
        border:1px solid #ccc;
    }
    .el-row {
        height:70px;
    }
    .el-row .el-col {
        height:60px;
        line-height:60px;
    }
    #roleGroup .grid-content {
        position:relative;
    }
    #roleGroup img {
        width:50px;
        height:50px;
        display:block;
        position:relative;
        left:50%;
        margin-left:-25px;
        top:0;
    }
    #roleGroup h4 {
        line-height:20px;
    }
</style>
<div id="test">
    <el-container>
        <el-main>
            <el-card style="height:100%;box-sizing: border-box;">
                <h1 height="10%">场景名称：{{sceneData.sceneName}}</h1>
<!--                对话预览-->
                <div style="border:1px solid #ccc;border-radius: 4px;height:60%;overflow: auto" id="session">
<!--                    chat-receiver-->
                    <div :class="index==2?'chat-receiver':'chat-sender'" v-for="(item,index) in orderList" :key="index">
                        <div><img src="/avatar/1.jpg"></div>
                        <div>{{item.roleName}}</div>
                        <div class="content_box">
<!--                            chat-right_triangle-->
                            <div :class="index==2?'chat-right_triangle':'chat-left_triangle'"></div>
                            <span>{{item.orderContent}}</span>
                        </div>
                    </div>
                </div>
<!--                角色分组-->
                <div id="roleGroup">
                    <el-row v-for="(item,index) in roleGroup" :key="index">
                        <el-col :span="2"><div class="grid-content bg-purple">
                            <el-tag>{{item.groupName}}</el-tag>
                        </div></el-col>
                        <el-col v-for="(item2,index) in item.roles" :key="index" :span="2"><div class="grid-content bg-purple-light">
                            <img :src="item2.avatar">
                            <h4>{{item2.roleName}}</h4>
                        </div></el-col>
                    </el-row>
                </div>
            </el-card>
        </el-main>
        <el-aside width="300px">
            <el-card style="height:100%;box-sizing:border-box;">
                <div class="title_box">
                    <div class="title_name">
                        <span></span>
                        <h3>场景列表</h3>
                    </div>
                    <el-divider></el-divider>
                </div>
                <div class="list-group-item" :class="[activeSceneid==item.sceneid?'active':'']"
                     v-for="(item,index) in planRoleList"
                     :key="item.index" @click="clickScene(item)" >
                    {{ item.sceneName }}
                </div>
            </el-card>
        </el-aside>
    </el-container>
</div>
<script>
    var test = new Vue({
        el:"#test",
        data(){
            return {
                title:"这里是测试页面",
                planRoleList: [{
                        sceneName: "信息报送",
                        sceneid: 197,
                        rows: [{
                            roleid: 15,
                            rolesName: "前端攻城狮",
                            userId: null,
                            planroleid: 7
                        }, {
                            roleid: 9,
                            rolesName: "出纳",
                            userId: 5,
                            planroleid: 8
                        }, {
                            roleid: 16,
                            rolesName: "java攻城狮",
                            userId: ""
                        }]
                    }, {
                        sceneName: "服务器宕机",
                        sceneid: 198,
                        rows: [{
                            roleid: 10,
                            rolesName: "测绘",
                            userId: 1,
                            planroleid: 2
                        }, {
                            roleid: 9,
                            rolesName: "出纳",
                            userId: 4,
                            planroleid: 3
                        }]
                    }, {
                        sceneName: "机房断电",
                        sceneid: 199,
                        rows: [{
                            roleid: 10,
                            rolesName: "测绘",
                            userId: ""
                        }, {
                            roleid: 12,
                            rolesName: "审核",
                            userId: 1,
                            planroleid: 9
                        }]
                    }, {
                        sceneName: "紧急处理",
                        sceneid: 200,
                        rows: [{
                            roleid: 15,
                            rolesName: "前端攻城狮",
                            userId: 5,
                            planroleid: 4
                        }, {
                            roleid: 9,
                            rolesName: "出纳",
                            userId: 4,
                            planroleid: 5
                        }, {
                            roleid: 8,
                            rolesName: "会计",
                            userId: 1,
                            planroleid: 6
                        }]
                    }],
                activeSceneid:"",
                sceneData:"",
                orderList:[
                    {roleName:"中心主任",orderContent:"你好，我是指挥中心XXX， XX时XX分，110kV北郊变荷塘803保护动作、开关分闸、装置异常；2#主变10kV开关分闸、后备保护动作；10kVⅡ段母线失压，指挥中心已经准备按照事故处理操作卡安排负荷转移"},
                    {roleName:"配电工区领导",orderContent:"楼局，XX时XX分，110kV北郊变10kVⅡ段母线失压，工区已启动应急预案，安排倒电方案,XXX主任已赶赴调度台。"},
                    {roleName:"配调",orderContent:"你好金华运维班，我是金华配调XXX，XX时XX分，110kV北郊变荷塘803保护动作、开关分闸、装置异常；2#主变10kV开关分闸、后备保护动作；10kV"},
                    {roleName:"金华运维班值长",orderContent:"你好毛主任，我是金华运维班值长XXX，110kV北郊变10kVⅡ段母线失压，已安排人员赶赴现场，通过查看图像监控系统发现北郊变10KV开关室内冒烟，具体情况到变电所检查后再汇报。"},
                    {roleName:"变电工区毛珠江",orderContent:"北郊变10kVⅡ段母线失压，图像监控发现10KV开关室冒烟，工区已成立应急领导小组、启动应急预案，我已带队赶赴现场。"},
                    {roleName:"变电工区龚渝宁",orderContent:"110kV北郊变10kVⅡ段母线失压，请立即安排两辆电力抢修车到变电工区参与抢修。"},
                    {roleName:"配调",orderContent:"你好修试工区，我是配调XXX，XX时XX分，110kV北郊变荷塘803保护动作、开关分闸、装置异常；2#主变10kV开关分闸、后备保护动作；10kVⅡ段母线失压，，请安排人员前往北郊变进行事故处理。"},
                    {roleName:"温佶强",orderContent:"楼局，XX时XX分，110kV北郊变10kVⅡ段母线失压，工区已成立应急领导小组、启动应急预案，我已带队赶赴现场。"},
                    {roleName:"楼其民",orderContent:"郝总，XX时XX分110kV北郊变开关柜严重损坏，10kVⅡ段母线失压，请你担任现场处置总指挥,立即赶赴现场指挥处置。"},
                    {roleName:"郝力军",orderContent:"郑雷，XX时XX分110kV北郊变开关柜严重损坏，10kVⅡ段母线失压，楼局指定我为现场处置总指挥，现指定你为现场处置联络员，请马上将情况通知相关单位和部门的领导。"},
                    {roleName:"联络员郑雷",orderContent:"你好修试工区，我是运检部郑雷，110kV北郊变开关柜损坏事件楼局已指定郝力军为现场处置总指挥。请确认工区现场带队领导，马上打电话给郝力军。"},
                ],
                roleGroup:[
                    {groupName:"应急组",roles:[
                            {roleName:"中心主任",avatar:'/avatar/1.jpg'},
                            {roleName:"配电工区领导",avatar:'/avatar/2.jpg'},
                            {roleName:"配调",avatar:'/avatar/3.jpg'},
                            {roleName:"金华运维班值长",avatar:'/avatar/4.jpg'},
                            {roleName:"变电工区毛珠江",avatar:'/avatar/5.jpg'},
                            {roleName:"变电工区龚渝宁",avatar:'/avatar/6.jpg'},
                            {roleName:"温佶强",avatar:'/avatar/7.jpg'},
                            {roleName:"联络员郑雷",avatar:'/avatar/8.jpg'},
                        ]},
                    {groupName:"救援组",roles:[
                            {roleName:"救护车司机",avatar:'/avatar/12.jpg'},
                            {roleName:"主治医师",avatar:'/avatar/10.jpg'},
                            {roleName:"护士",avatar:'/avatar/8.jpg'},
                            {roleName:"院长",avatar:'/avatar/4.jpg'},
                            {roleName:"药剂师",avatar:'/avatar/9.jpg'},
                            {roleName:"麻醉师",avatar:'/avatar/5.jpg'},
                            {roleName:"护工",avatar:'/avatar/7.jpg'},
                            {roleName:"检验师",avatar:'/avatar/8.jpg'},
                        ]}
                ]
            }
        },
        mounted(){
            this.activeSceneid = this.planRoleList[0].sceneid;
            this.sceneData = this.planRoleList[0];
        },
        methods:{
            clickScene(item){
                //当前场景标签切换
                this.activeSceneid = item.sceneid;
                //当前场景数据赋值
                this.sceneData = item;
            }
        }
    })
</script>
</body>
</html>